<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css">
  <title>选品管理</title>
  <style>
    .avatar-uploader .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="app" v-clock>
  <el-card>
    <template #header>
      <el-form :inline="true" :model="listForm">
        <el-form-item label="ID">
          <el-input v-model="listForm.id" type="number" placeholder="请输入ID" clearable />
        </el-form-item>
        <el-form-item label="商品标题">
          <el-input v-model="listForm.title" placeholder="请输入商品标题" clearable />
        </el-form-item>
        <el-form-item label="1688链接">
          <el-input v-model="listForm.ali" placeholder="请输入1688链接" clearable />
        </el-form-item>
        <el-form-item label="抖音链接">
          <el-input v-model="listForm.douyin" placeholder="请输入抖音链接" clearable />
        </el-form-item>
        <el-form-item label="拼多多链接">
          <el-input v-model="listForm.pdd" placeholder="请输入拼多多链接" clearable />
        </el-form-item>
        <el-form-item label="淘宝链接">
          <el-input v-model="listForm.taobao" placeholder="请输入淘宝链接" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="getList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="showDialog(false)">添加</el-button>
        </el-form-item>
      </el-form>
    </template>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="ID"  width="60"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="picture" label="图片" width="120">
        <template #default="{row,$index}">
          <el-image :src="row.picture" :preview-src-list="list.map(item => item.picture)" alt="" :initial-index="$index" style="width: 100px;height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="ali" label="1688链接" width="110">
        <template #default="{ row }">
          <div v-if="row.ali">
            <el-link type="primary" :href="row.ali" target="\_blank" style="margin-right: 20px;">访问</el-link>
            <el-link type="primary" :underline="false" @click="copyText(row.ali)">复制</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="douyin" label="抖音链接" width="110">
        <template #default="{ row }">
          <div v-if="row.douyin">
            <el-link type="primary" :href="row.douyin" target="\_blank" style="margin-right: 20px;">访问</el-link>
            <el-link type="primary" :underline="false" @click="copyText(row.douyin)">复制</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pdd" label="拼多多链接" width="110">
        <template #default="{ row }">
          <div v-if="row.pdd">
            <el-link type="primary" :href="row.pdd" target="\_blank" style="margin-right: 20px;">访问</el-link>
            <el-link type="primary" :underline="false" @click="copyText(row.pdd)">复制</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="taobao" label="淘宝链接" width="110">
        <template #default="{ row }">
          <div v-if="row.taobao">
            <el-link type="primary" :href="row.taobao" target="\_blank" style="margin-right: 20px;">访问</el-link>
            <el-link type="primary" :underline="false" @click="copyText(row.taobao)">复制</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template #default="scope">
          <el-button type="primary" size="small" @click="showDialog(true,scope.$index)">编辑</el-button>
          <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;display: flex;justify-content: flex-end;">
      <el-pagination
              background
              layout="total, prev, pager, next, jumpe"
              :total="total"
              :page-size="listForm.size"
              @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </el-card>

  <el-dialog
          class="avatar-uploader"
          v-model="dialogVisible"
          title="编辑商品"
          width="500px"
          top="2vh"
  >
    <el-form :model="form" label-width="90" ref="ruleFormRef" :model="form" :rules="ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入商品标题" />
      </el-form-item>
      <el-form-item label="图片" prop="picture">
        <el-upload
                action="/upload"
                :show-file-list="false"
                :on-success="handleUploadSuccess"
        >
          <img v-if="form.picture" :src="form.picture" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-input v-model="form.picture" placeholder="请输入图片链接" style="margin-top: 20px;" />
      </el-form-item>
      <el-form-item label="1688链接">
        <el-input v-model="form.ali" placeholder="请输入1688链接" />
      </el-form-item>
      <el-form-item label="抖音链接">
        <el-input v-model="form.douyin" placeholder="请输入抖音链接" />
      </el-form-item>
      <el-form-item label="拼多多链接">
        <el-input v-model="form.pdd" placeholder="请输入拼多多链接" />
      </el-form-item>
      <el-form-item label="淘宝链接">
        <el-input v-model="form.taobao" placeholder="请输入淘宝链接" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</div>

<script src="//cdn.jsdelivr.net/npm/vue@3"></script>
<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
<script src="//cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
<script>
  const app = Vue.createApp({
    setup() {
      const list = Vue.ref([])
      const listForm = Vue.reactive({
        page:1,
        size:10,
        id:"",
        title:"",
        ali:"",
        douyin:"",
        pdd:"",
        taobao:""
      })
      const total = Vue.ref(0)
      const getList = () => {
        axios.get(`/commodity?page=${listForm.page}&size=${listForm.size}&id=${listForm.id}&title=${listForm.title}&ali=${listForm.ali}&douyin=${listForm.douyin}&pdd=${listForm.pdd}&taobao=${listForm.taobao}`)
                .then(res => {
                  const { code, data, message } = res.data
                  if (code !== 0){
                    ElementPlus.ElMessage.error(message)
                  }else{
                    list.value = data.list
                    total.value = data.total
                  }
                })
                .catch(err => {
                  ElementPlus.ElMessage.error(err)
                })
      }
      getList()

      const handleCurrentChange = (val) => {
        listForm.page = val
        getList()
      }

      const del = (id) => {
        ElementPlus.ElMessageBox.confirm(
                '确定删除?',
                '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                }
        )
                .then(() => {
                  axios.delete(`/commodity/${id}`)
                          .then(res => {
                            const { code, data, message } = res.data
                            if (code !== 0){
                              ElementPlus.ElMessage.error(message)
                            }else{
                              ElementPlus.ElMessage.success(message)
                              getList()
                            }
                          })
                          .catch(err => {
                            ElementPlus.ElMessage.error(err)
                          })
                })
                .catch()
      }

      const dialogVisible = Vue.ref(false)
      const form = Vue.reactive({
        id:"",
        title:"",
        picture:"",
        ali:"",
        douyin:"",
        pdd:"",
        taobao:""
      })
      const ruleForm = Vue.reactive({
        title:[
          { required: true, message: '请输入商品标题', trigger: 'blur' },
        ],
        picture:[
          { required: true, message: '请上传商品图片', trigger: 'change' },
        ]
      })

      const handleUploadSuccess = (response) => {
        form.picture = response.data
      }

      let isEdit = Vue.ref(false)

      const showDialog = (type,index) => {
        isEdit.value = type
        if (type){
          form.id = list.value[index].id
          form.title = list.value[index].title
          form.picture = list.value[index].picture
          form.ali = list.value[index].ali
          form.douyin = list.value[index].douyin
          form.pdd = list.value[index].pdd
          form.taobao = list.value[index].taobao
        }else{
          form.id = ""
          form.title = ""
          form.picture = ""
          form.ali = ""
          form.douyin = ""
          form.pdd = ""
          form.taobao = ""
        }
        dialogVisible.value = true
      }

      const ruleFormRef = Vue.ref()

      const save = () => {
        ruleFormRef.value.validate((valid) => {
          if (valid) {
            if (isEdit.value){
              axios.put('/commodity',form)
                      .then(res => {
                        const { code, data, message } = res.data
                        if (code !== 0){
                          ElementPlus.ElMessage.error(message)
                        }else{
                          ElementPlus.ElMessage.success(message)
                          getList()
                          dialogVisible.value = false
                        }
                      })
                      .catch(err => {
                        ElementPlus.ElMessage.error(err)
                      })
            }else{
              axios.post(`/commodity`,form)
                      .then(res => {
                        const { code, data, message } = res.data
                        if (code !== 0){
                          ElementPlus.ElMessage.error(message)
                        }else{
                          ElementPlus.ElMessage.success(message)
                          getList()
                          dialogVisible.value = false
                        }
                      })
                      .catch(err => {
                        ElementPlus.ElMessage.error(err)
                      })
            }
          }
        })
      }

      const copyText = (text) => {
        const input = document.createElement('input')
        input.setAttribute('readonly', 'readonly')
        input.setAttribute('value', text)
        document.body.appendChild(input)
        input.select()
        if (document.execCommand('copy')) {
          document.execCommand('copy')
          ElementPlus.ElMessage.success('复制成功')
        }
        document.body.removeChild(input)
      }

      return {
        listForm,
        total,
        getList,
        list,
        handleCurrentChange,
        del,
        dialogVisible,
        form,
        ruleForm,
        ruleFormRef,
        handleUploadSuccess,
        showDialog,
        save,
        copyText
      }
    }
  })
  app.use(ElementPlus)
  app.component("Plus", ElementPlusIconsVue['Plus'])
  app.mount("#app")
</script>
</body>
</html>
